<template>
  <common-wrap title="影像">
    <div v-if="dicomData">
      <div class="viewer-top-wrap">
        <div class="viewer-top-info">
          <div>
            <span>
              病例号：
              <span class="viewer-desc-content">{{ dicomData.patientUid }}</span>
            </span>
            <span>
              拍片时间：
              <span class="viewer-desc-content">{{ dicomData.studyDate }}</span>
            </span>
            <span>
              序列：
              <span class="viewer-desc-content">{{ dicomData.seriesCount }}</span>
            </span>
            <span>
              影像：
              <span class="viewer-desc-content">{{ dicomData.imageCount }}</span>
            </span>
          </div>
          <span class="tag modality-tag">{{ dicomData.modality }}</span>
        </div>
        <el-button type="primary" size="small" @click="handleOpenViewer(dicomData.studyUid)"
          >查看影像</el-button
        >
        <!-- <el-button type="danger" size="small">删除影像</el-button> -->
      </div>
      <div class="table-wrap">
        <ym-table
          :data="dicomData.seriesList"
          :column-data="columnData"
          operator-width="70"
          :operator-show="false"
        >
          <template #pic="{ row }">
            <div class="image-wrap">
              <el-image
                v-if="row.thumbnail"
                class="image-item cup"
                style="width: 60px; height: 60px"
                :src="dicomData.urlPublic + row.thumbnail"
                @click="handleOpenViewer(row.studyUid)"
              />
              <!-- <span class="image-num">{{ row.imageCount }}</span> -->
            </div>
          </template>
          <template #seriesTime="{ row }">
            <span>{{ row.seriesData }} {{ row.seriesTime }}</span>
          </template>

          <template #operator="{ row }">
            <el-button type="text" class="btn-del" @click="delViewer(row)">删除</el-button>
          </template>
        </ym-table>
      </div>
    </div>
  </common-wrap>
</template>

<script lang="ts" setup>
import { computed, defineProps } from 'vue'

import CommonWrap from '@/components/CommonWrap/index.vue'
import { YmTable } from '@/components/YmTable'

import { openViewer } from '@/utils/common/openViewer'

const columnData = [
  {
    label: '',
    prop: '',
    slotname: 'pic',
    width: '100',
  },
  {
    label: '序号',
    prop: 'seriesNo',
    width: '80',
  },
  // {
  //   label: '影像',
  //   prop: '',
  //   slotname: 'pic',
  //   minWidth: '120'
  // },
  {
    label: '描述',
    prop: 'seriesDesc',
  },
  {
    label: '协议',
    prop: 'protoco',
  },
  {
    label: '部位',
    prop: 'bodyPart',
  },
  {
    label: '影像',
    prop: 'imageCount',
    width: '60',
  },
  {
    label: '拍片时间',
    prop: '',
    slotname: 'seriesTime',
  },
  {
    label: '上传时间',
    prop: 'creatTime',
  },
]
const props = defineProps({
  detail: {
    type: Object,
    default: () => {},
  },
})
const dicomData = computed(() => props.detail.dicom)
console.log('dicom', props.detail)

const handleOpenViewer = (studyUid: string) => {
  openViewer({
    moduleFlags: 1,
    studyUid,
  })
}

const delViewer = (row: any) => {
  console.log('r', row)
}
</script>

<style lang="scss" scoped>
.viewer-top-wrap {
  display: flex;
  height: 40px;
  // padding-right: 20px;
  align-items: center;
  justify-content: space-between;
}

.viewer-top-info {
  display: flex;
  padding: 10px 0 10px 15px;
  // height: 40px;
  padding-left: 15px;
  margin-right: 20px;
  border: 1px solid var(--color-success);
  border-radius: 6px;
  flex: 1;
  align-items: center;
  justify-content: space-between;

  & > div > span {
    margin-right: 10px;
  }

  .tag {
    margin-left: 10px;
  }

  .viewer-desc-content {
    font-size: 16px;
    font-weight: 600;
  }
}

.image-wrap {
  display: flex;
  align-items: center;

  .el-image {
    flex-shrink: 0;
  }
}

.image-num {
  display: inline-block;
  padding: 4px 8px;
  margin-left: 10px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  color: #4dbb5f;
  border: 2px solid currentColor;
  border-radius: 4px;
}

.table-wrap {
  padding-right: 0;
  padding-left: 0;
}
</style>
